<template>
  <view class="feature-content">
    <u-collapse class="box" :value="activeNames">
      <u-collapse-item title="仓颉样例" class="active-box" :style="{'--tabActivecolor': Activecolor}" name="10">
        <u-grid col="4">
          <u-grid-item class="feature-item" @click="eventlist">
            <img src="../../static/feature/event.png" style="width: 48px;height: 48px"/>
            <text>事件</text>
          </u-grid-item>
          <u-grid-item class="feature-item" @click="recoverable">
            <img src="../../static/feature/event.png" style="width: 48px;height: 48px"/>
            <text>报销</text>
          </u-grid-item>
          <u-grid-item class="feature-item" @click="clickClientele">
            <img src="../../static/feature/client.png" style="width: 48px;height: 48px"/>
            <text>客户</text>
          </u-grid-item>
          <u-grid-item class="feature-item" @click="department">
            <img src="../../static/feature/depart.png" style="width: 48px;height: 48px"/>
            <text>部门</text>
          </u-grid-item>
        </u-grid>
      </u-collapse-item>
      <u-collapse-item title="样例" class="active-box2" :style="{'--tabActivecolor2': Activecolor2}" name="20">
        <u-grid col="4">
          <u-grid-item class="feature-item" @click="goods">
            <img src="../../static/feature/shop.png" style="width: 48px;height: 48px"/>
            <text>商品</text>
          </u-grid-item>
          <u-grid-item class="feature-item" @click="cart">
            <img src="../../static/feature/car.png" style="width: 48px;height: 48px"/>
            <text>购物车</text>
          </u-grid-item>
          <u-grid-item class="feature-item" @click="componentSample">
            <img src="../../static/feature/car.png" style="width: 48px;height: 48px"/>
            <text>组件样例</text>
          </u-grid-item>
          <u-grid-item class="feature-item">
            <img src="../../static/feature/user.png" style="width: 48px;height: 48px"/>
            <text>个人中心</text>
          </u-grid-item>
        </u-grid>
      </u-collapse-item>
      <u-collapse-item title="镜头类" class="active-box3" :style="{'--tabActivecolor3': Activecolor3}" name="40">
        <u-grid col="4">
          <u-grid-item class="feature-item">
            <img src="../../static/feature/photo.png" style="width: 48px;height: 48px"/>
            <text>照片</text>
          </u-grid-item>
          <u-grid-item class="feature-item">
            <img src="../../static/feature/scan.png" style="width: 48px;height: 48px"/>
            <text>二维码</text>
          </u-grid-item>
          <u-grid-item class="feature-item">
            <img src="../../static/feature/video.png" style="width: 48px;height: 48px"/>
            <text>视频</text>
          </u-grid-item>
        </u-grid>
      </u-collapse-item>
      <u-collapse-item title="图表类" class="active-box" :style="{'--tabActivecolor': Activecolor}" name="60">
        <u-grid col="4">
          <u-grid-item class="feature-item" @click="click">
            <img src="../../static/feature/line_img.png" style="width: 48px;height: 48px"/>
            <text>line</text>
          </u-grid-item>
          <u-grid-item class="feature-item" @click="clickBar">
            <img src="../../static/feature/bar.png" style="width: 48px;height: 48px"/>
            <text>bar</text>
          </u-grid-item>
          <u-grid-item class="feature-item" @click="clickPie">
            <img src="../../static/feature/pie.png" style="width: 48px;height: 48px"/>
            <text>pie</text>
          </u-grid-item>
          <u-grid-item class="feature-item" @click="clickMap">
            <img src="../../static/feature/map.png" style="width: 48px;height: 48px"/>
            <text>map</text>
          </u-grid-item>
          <u-grid-item class="feature-item" @click="clickRadar">
            <img src="../../static/feature/map.png" style="width: 48px;height: 48px"/>
            <text>radar</text>
          </u-grid-item>
        </u-grid>
      </u-collapse-item>
      <u-collapse-item title="地图类" class="active-box2" :style="{'--tabActivecolor2': Activecolor2}" name="70">
        <u-grid col="4">
          <u-grid-item class="feature-item" @click="mapDot">
            <img src="../../static/feature/map.png" style="width: 48px;height: 48px"/>
            <text>地图打点</text>
          </u-grid-item>
          <u-grid-item class="feature-item">
            <img src="../../static/feature/mapPoint.png" style="width: 48px;height: 48px"/>
            <text>地图画框</text>
          </u-grid-item>
          <u-grid-item class="feature-item" @click="mapLine">
            <img src="../../static/feature/mapPoint.png" style="width: 48px;height: 48px"/>
            <text>地图画线</text>
          </u-grid-item>
        </u-grid>
      </u-collapse-item>
      <u-collapse-item title="对接类" class="active-box3" :style="{'--tabActivecolor3': Activecolor3}" name="80">
        <u-grid col="4">
          <u-grid-item class="feature-item">
            <img src="../../static/feature/v-login.png" style="width: 48px;height: 48px"/>
            <text>微信登录</text>
          </u-grid-item>
          <u-grid-item class="feature-item">
            <img src="../../static/feature/v-price.png" style="width: 48px;height: 48px"/>
            <text>微信支付</text>
          </u-grid-item>
          <u-grid-item class="feature-item">
            <img src="../../static/feature/v-scan.png" style="width: 48px;height: 48px"/>
            <text>微信扫码</text>
          </u-grid-item>
          <u-grid-item class="feature-item">
            <img src="../../static/feature/v-share.png" style="width: 48px;height: 48px"/>
            <text>微信分享</text>
          </u-grid-item>
        </u-grid>
      </u-collapse-item>
    </u-collapse>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ['10'],
      Activecolor: '#1762F2',
      Activecolor2: '#D34D25',
      Activecolor3: '#FFBC19'
    }
  },
  onLoad(options) {
    if (options.hid) {
      this.activeNames = [options.hid]
    }
  },
  methods: {
    click() {
      uni.navigateTo({
        url: '/pages/chat/line'
      })
    },
    clickBar() {
      uni.navigateTo({
        url: '/pages/chat/bar'
      })
    },
    clickPie() {
      uni.navigateTo({
        url: '/pages/chat/pie'
      })
    },
    clickMap() {
      uni.navigateTo({
        url: '/pages/chat/map'
      })
    },
    mapLine() {
      uni.navigateTo({
        url: '/pages/chat/mapLine'
      })
    },
    mapDot() {
      uni.navigateTo({
        url: '/pages/chat/mapDot'
      })
    },
    clickRadar() {
      uni.navigateTo({
        url: '/pages/chat/radar'
      })
    },
    cart() {
      uni.navigateTo({
        url: '/pages/cart/cart'
      })
    },
    componentSample() {
      uni.navigateTo({
        url: '/pages/componentSample/componentSample'
      })
    },
    goods() {
      uni.navigateTo({
        url: '/pages/goods/goods'
      })
    },
    recoverable() {
      uni.navigateTo({
        url: '/pages/recoverable/recoverable'
      })
    },
    department() {
      uni.navigateTo({
        url: '/pages/department/departmentList'
      })
    },
    eventlist() {
      uni.navigateTo({
        url: '/pages/event/eventList'
      })
    },
    // 客户
    clickClientele() {
      uni.navigateTo({
        url: '/pages/clientele/clientele'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.feature-item {
  width: 25% !important;
}

.box .active-box :deep(.u-cell__title-text),
.box .active-box2 :deep(.u-cell__title-text),
.box .active-box3 :deep(.u-cell__title-text) {
  position: relative;
}

.box .active-box :deep(.u-cell__title-text)::after,
.box .active-box2 :deep(.u-cell__title-text)::after,
.box .active-box3 :deep(.u-cell__title-text)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 16px;
  height: 4px;
  border-radius: 2px;
}

.box .active-box :deep(.u-cell__title-text)::after {
  background: var(--tabActivecolor);
}

.box .active-box2 :deep(.u-cell__title-text)::after {
  background: var(--tabActivecolor2);
}

.box .active-box3 :deep(.u-cell__title-text)::after {
  background: var(--tabActivecolor3);
}
</style>
